<template>
  <div>
    <n-data-table class="s-table" :columns="columns" :data="data" :pagination="data.length > 0 ? paginations: false" :bordered="false" :loading="loading" />
  </div>
</template>
<script lang="ts" setup>
import { ref, unref, reactive, onMounted, computed, defineComponent, h } from 'vue';
import { anchorDark, useMessage, NButton, useDialog } from 'naive-ui';
import { useRoute } from 'vue-router';
// import {accVarListGets,accVarListDelete} from '@/api/GlobalVarMgt/GlobalVarMgt';   // todo open
const dialog = useDialog();
const message = useMessage();
const emits = defineEmits(['send']);

// table列表加载
let loading = ref(false);
// 标头数据
// id
// var_name(变量名称)
// device_name(门将设备名称)
// au_type(鉴权方式 0 - 门卡 1 - 开门密码 2 - 指纹 3 - 人脸)
// status(结果 1 - 成功 2 - 失败)
// user_name(员工姓名)
// dept_name(部门)
// time_frame(时间范围 1 - 最近1小时 2 - 最近12小时 3 - 最近1天 4 - 最近7天 5 - 最近30天)
// var_value(值)
const columns = [
  {
    title: '变量名称',
    key: 'var_name',
  },
  {
    title: '门将设备名称',
    key: 'device_name',
  },
  {
    title: '鉴权方式',
    key: 'au_type',
    render(row) {
      return h('div', [
        h(
          NButton,
          {
            quaternary: true,
            size: 'small',
          },
          {
            default: () => {
              // 0 - 门卡 1 - 开门密码 2 - 指纹 3 - 人脸
              if (row.au_type == 0) {
                return '门卡';
              }
              if (row.au_type == 1) {
                return '开门密码';
              }
              if (row.au_type == 2) {
                return '指纹';
              }
              if (row.au_type == 3) {
                return '人脸';
              }
            }
          }
        ),
      ]);
    }
  },
  {
    title: '结果',
    key: 'status',
    render(row) {
      return h('div', [
        h(
          NButton,
          {
            quaternary: true,
            size: 'small',
          },
          {
            default: () => {
              // (结果 1 - 成功 2 - 失败)
              if (row.status == 1) {
                return '成功';
              }
              if (row.status == 2) {
                return '失败';
              }
            }
          }
        ),
      ]);
    }
  },{
    title: '员工姓名',
    key: 'user_name',
  },
  {
    title: '部门',
    key: 'dept_name',
  },
  {
    title: '时间范围',
    key: 'time_frame',
    render(row) {
      return h('div', [
        h(
          NButton,
          {
            quaternary: true,
            size: 'small',
          },
          { default: () => {
            // (时间范围 1 - 最近1小时 2 - 最近12小时 3 - 最近1天 4 - 最近7天 5 - 最近30天)
            if (row.time_frame == 1) {
              return '最近1小时';
            } 
            if (row.time_frame == 2) {
              return '最近12小时)';
            } 
            if (row.time_frame == 3) {
              return '最近1天)';
            } 
            if (row.time_frame == 4) {
              return '最近7天)';
            } 
            if (row.time_frame == 5) {
              return '最近30天)';
            } 
          } }
        ),
      ]);
    }
  },

  {
    title: '值',
    key: 'var_value',
    width: 400,
    render(row) {
        return h('div', [
          h(
            NButton,
            {
              quaternary: true,
              size: 'small',
              class: 's-td'
            },
            { default: () => row.var_value }
          ),
        ]);
    }
  },
  {
      title: '操作',
      key: 'actions',
      render(row) {
        return h('div', [
          h(
            NButton,
            {
              quaternary: true,
              type: 'info',
              size: 'small',
              onClick: () => edit(row),
              style: { marginRight: '10px' },
            },
            { default: () => '编辑' }
          ),
          h(
            NButton,
            {
              quaternary: true,
              type: 'info',
              size: 'small',
              onClick: () => del(row),
            },
            { default: () => '删除' }
          ),
        ]);
      },
    },
];

// 组件参数
const props = defineProps({
  pageParam: {
    type: Object,
    required: true,
  },
});

// 获取当前路由
const route = useRoute();
// 从路由参数中获取 id
const pageId = route.query.id;
console.log('id', pageId);

// 新增
const add = (row) => {
  // 发送新增消息
  emits('send', 'openAddForm');
};
// 编辑
const edit = (row) => {
  // 发送编辑消息
  emits('send', 'openEditForm', row);
};

// 删除
const del = (row) => {
  dialog.warning({
      title: '警告',
      content: '确定删除吗？',
      positiveText: '确定',
      negativeText: '取消',
      onPositiveClick: async () => {
        let params = {
          ids:[row.id],
        };
        let res = await accVarListDelete(params);
        if (res.code == 200) {
          message.success('删除成功');
          refresh(searchParams);
        }
        if (res.code != 200) {
          message.error(res.msg || '删除失败');
        }
      },
    });
};

// 刷新数据回调用方法
function refresh(params) {
  // 判断params是否传递参数，传递参数需要保存，防止翻页丢失搜索条件
  if (params) {
    Object.assign(searchParams, params);
  }
  search(); // 重新获取列表数据
};

// 新增数据回调用方法
function newAdd(params) {
    // 发送新增消息
    emits('send', 'openAddForm');
};

// 列表数据
const data = ref([
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
  {id: 1, var_name: '123', device_name: '机柜', au_type: 0 , status: 1,user_name: '用户名', dept_name :'市场部', time_frame: 1,var_value:'变量值为列表:[[{"告警级别"}]]'},
]);

// 分页配置
const paginations = reactive({
  page: 1,
  pageSize: 12,
  showQuickJumper: true,
  showSizePicker: true,
  showPages: true,
  size: 'large',
  pageSizes: [10, 20, 30],
  prefix:()=> `共${total.value}条`,
  onChange: (page: number) => {
    paginations.page = page
    search();
  },
  onUpdatePageSize: (pageSize: number) => {
    paginations.pageSize = pageSize
    paginations.page = 1
    search();
  },
});
const total = ref(0);

// 保存搜索参数
const searchParams = reactive({});

// 列表获取数据
const search = async () => {
  const params = { page:paginations.page, pageSize:paginations.pageSize, ...searchParams};
  loading.value = true;
  const res = await accVarListGets(params);
  loading.value = false;
  if(res.code === 200) {
    data.value = res.data;
    total.value = res.total;
    return
  }
  message.error(res.msg);
};
// 初始化
function init() {
  // search();  // todo open
}

// 表格需要暴露出init、refresh方法
defineExpose({
  init,
  refresh,
  newAdd
});
</script>

<style lang="less" scoped>
::v-deep .s-table .n-data-table-tr .n-data-table-th{
  border: none;
  background: #0E1E2E;
}
::v-deep .s-table .n-data-table-tr:nth-child(odd) .n-data-table-td{
  background: #182e46;
  color: #fff;
}

::v-deep .s-table .n-data-table-tr:nth-child(even) .n-data-table-td{
  background: #0E1E2E;
  color: #fff;
}
::v-deep .s-table .n-data-table .n-data-table-tr:hover{
  background-color: #1075C4 !important;
}

::v-deep .s-table .n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td{
  background-color: #1075C4 !important;
}

::v-deep .s-table .n-data-table .n-data-table-td{
  border-bottom: none !important;
}

::v-deep  .n-button--info-type .n-button__content{
  border-bottom: 1px solid #0f6db5;
  color:#0f6db5;
}

::v-deep .s-td .n-button__content {
  display: inline-block;
  width: 400px;
  /* 设置文本溢出部分显示省略号 */
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 显示省略号 */
}

::v-deep .s-table .n-data-table-th{
  text-align: center !important;
}
::v-deep .s-table .n-data-table-td{
  text-align: center !important;
}

::v-deep .n-data-table-tr .n-data-table-th {
    border: none;
    background: #0E1E2E;
  }

  ::v-deep .n-data-table-tr:nth-child(odd) .n-data-table-td {
    background: #182e46;
    color: #fff;

  }

  ::v-deep .n-data-table-tr:nth-child(even) .n-data-table-td {
    background: #0E1E2E;
    color: #fff;
  }

  ::v-deep .n-data-table .n-data-table-tr:hover {
    background-color: #1075C4 !important;
  }

  ::v-deep .n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover>.n-data-table-td {
    background-color: #1075C4 !important;
  }

  ::v-deep .n-data-table .n-data-table-td {
    border-bottom: none !important;
  }
</style>
